<template>
  <div class="work-dialog">
    <el-dialog :visible.sync="visible">
      <div
        :class="`${isEdit ? 'work-container' : 'work-conta'} work-con m-b-40`"
      >
        <div class="panelWrap work-content">
          <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
            <div>{{ isEdit ? "修改维保工单" : "添加维保工单" }}</div>
            <i class="el-icon-close" @click="handleCloseDialog" />
          </div>
          <div class="work-main flex flexdc flexcenter m-t-30">
            <div class="workbox">
              <!-- top合同内容 -->
              <div class="main-cont flex">
                <div :class="`${isEdit ? 'cont-left' : 'cont-lef'}`">
                  <div class="entryName m-b-15">
                    <span class="name"><span class="mustval">*</span>维保计划：</span>
                    <el-input v-model="form.planName" readonly class="entry-input co-input" placeholder="请选择计划" />
                    <el-button v-if="!isEdit" type="warning" class="m-l-10" @click="handleContrat">选择计划</el-button>
                  </div>

                  <div class="entryName m-b-15">
                    <span class="name"><span class="mustval">*</span>维保单位：</span>
                    <el-input v-model="form.maUnitName" readonly class="entry-input co-input" />
                  </div>

                  <!-- <div class="entryName m-b-15">
                    <span
                      class="name"
                    ><span class="mustval">*</span>使用单位：</span>
                    <el-input
                      v-model="form.userUnitName"
                      readonly
                      class="entry-input co-input"
                    />
                  </div> -->
                </div>

                <!-- 右侧 -->
                <div>
                  <!-- <div class="demand m-b-15">
                    <span class="name"><span class="mustval">*</span>工单编号：</span>
                    <el-input v-model="form.orderNumber" class="co-input" placeholder="请输入工单编号" />
                  </div> -->
                  <div class="entryName m-b-15">
                    <span class="name"><span class="mustval">*</span>维保人员：</span>
                    <el-input v-model="form.workUserName" readonly class="entry-input co-input" placeholder="请选择维保人员" />
                    <el-button type="warning" class="m-l-10" @click="handlePerSon">选择人员</el-button>
                  </div>

                  <div v-if="isEdit" class="entryName m-b-15">
                    <span class="name"><span class="mustval">*</span>工单编号：</span>
                    <el-input v-model="form.orderNumber" readonly class="entry-input co-input" />
                  </div>
                  <div class="maType m-b-15">
                    <span class="name"><span class="mustval">*</span>工单类型：</span>
                    <el-select v-model="form.type" :disabled="isEdit" placeholder="请选择工单类型" class="co-input">
                      <el-option
                        v-for="item in typeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </div>
                <!-- <div class="con-right flex flexdc">
                  <div class="creDate co-date m-b-15">
                    <span class="name">&nbsp;&nbsp;&nbsp;<span class="mustval">*</span>预约时间：</span>
                    <el-date-picker
                      v-model="form.appointmentDate"
                      type="date"
                      placeholder="选择预约日期"
                    />
                  </div>
                  <div class="co-date lasDate m-b-15">
                    <span class="name"><span class="mustval">*</span>应完成时间：</span>
                    <el-date-picker
                      v-model="form.exceptDate"
                      type="date"
                      placeholder="选择应完成日期"
                    />
                  </div>
                </div> -->

              </div>

              <!-- 分割线 -->
              <el-divider v-if="isEdit" class="divider">电梯图片面板</el-divider>
              <!-- 电梯图片 -->
              <div v-if="isEdit" class="wo-imageBox flex m-t-30 m-l-40">
                <div class="el-box flex flexdc m-t-30">
                  <!-- 现场视频 -->
                  <div class="videobox m-b-15 flex flexdc m-l-100">
                    <UploadVideo
                      :title="titleVd"
                      :pic-url="form.videoPath"
                      @sendVideo="handleVideo"
                    />
                  </div>
                  <!-- 轿厢图片 -->
                  <div class="image1 jx m-b-15 m-r-100 flex flexdc loadImg">
                    <UploadImg
                      :state="type"
                      :title="titleJx"
                      :pic-url="form.inImage"
                      @sendImginfo="handleImg1"
                    />
                  </div>
                  <!-- 机房图片 -->
                  <div class="image1 jx m-b-20 m-r-100 flex flexdc loadImg">
                    <UploadImg
                      :state="type"
                      :title="titleJf"
                      :pic-url="form.roomImage"
                      @sendImginfo="handleImg2"
                    />
                  </div>
                </div>

                <div class="el-box1 flex">
                  <!-- 电梯背景图片 -->
                  <div class="bcakbox flexcenter flexdc">
                    <!-- 轿顶图片 -->
                    <div class="image1 m-b-20 flex flexdc">
                      <UploadImg
                        :state="type"
                        :title="titleJd"
                        :pic-url="form.topImage"
                        @sendImginfo="handleImg3"
                      />
                    </div>
                    <!-- 电梯图片 -->
                    <div class="bcakImage" />
                    <!-- 地坑图片 -->
                    <div class="image1 m-b-15 flexdc m-t-20">
                      <UploadImg
                        :state="type"
                        :title="titleDk"
                        :pic-url="form.downImage"
                        @sendImginfo="handleImg4"
                      />
                    </div>
                  </div>
                  <div class="box1-imgbox flex flexdc m-l-85 m-t-30 m-r-20">
                    <!-- 签到图片 -->
                    <div class="image2 m-b-20 flex flexdc">
                      <UploadImg
                        :state="type"
                        :title="titleQd"
                        :pic-url="form.signImage"
                        @sendImginfo="handleImg5"
                      />
                    </div>
                    <!-- 其他图片 -->
                    <div class="image2 m-b-15 flex flexdc">
                      <UploadImg
                        :state="type"
                        :title="titleQt"
                        :pic-url="form.otherImage"
                        @sendImginfo="handleImg6"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <!-- 分割线 -->
              <el-divider class="divider">电梯选择面板</el-divider>

              <!-- 电梯选择面板 -->
              <!-- <div class="tablebox"> -->
              <!-- 电梯列表 -->
              <el-table
                ref="multipleTable"
                class="con-table m-b-25"
                :data="
                  dataList.slice(
                    (paging.currentPage - 1) * paging.pageSize,
                    paging.currentPage * paging.pageSize
                  )
                "
                highlight-current-row
                @select-all="handleCheck"
                @select="handleCheck"
                @selection-change="handleCheckChange"
              >
                <!-- 复选框 -->
                <el-table-column type="selection" width="55" height="40" />

                <template v-for="item in tablehead">
                  <el-table-column
                    :key="item.id"
                    :width="item.width"
                    align="center"
                    :prop="item.prop"
                    :label="item.label"
                  />
                </template>

                <el-table-column align="center" label="绑定状态" width="100">
                  <template slot-scope="scope">
                    <span :class="`status-${scope.row.bindState} statuso`">
                      {{
                        scope.row.bindState === 0
                          ? "未绑定"
                          : scope.row.bindState === 1
                            ? "已录入"
                            : scope.row.bindState === 2
                              ? "已申请"
                              : scope.row.bindState === 3
                                ? "已绑定"
                                : scope.row.bindState === 4
                                  ? "已拒绝"
                                  : "未确认"
                      }}
                    </span>
                  </template>
                </el-table-column>
              </el-table>
              <!-- </div> -->
            </div>

            <div :class="`${isEdit ? 'wfooter' : 'wfooters'} flexcenter`">
              <el-button v-if="!isEdit" class="saveBtn btn m-r-30 el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
              <el-button v-else type="success" class="m-r-30 btn el-icon-circle-check" @click="handleSave(1)">更 新</el-button>
              <el-button class="clsoeBtn btn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 维保计划 -->
    <WorkPlan
      v-model="conVisible"
      @update="handleWorkUpdate"
      @updates="handleWorkUpdates"
      @handleCloseDialog="handleClosePCDialog"
    />
    <!-- 维保人员 -->
    <Personnel
      v-model="perVisible"
      @update="handlePerUpdate"
      @handleCloseDialog="handleClosePerDialog"
    />
  </div>
</template>

<script>
import WorkPlan from './workPlan'
import UploadImg from '@/components/uploadImg/index'
import UploadVideo from '@/components/uploadVideo/index'
import Personnel from './personnel'
import { showNotice } from '@/utils/toolclass'
import { miOrderAdd, miOrderUpdate } from '@/api/maintenance/order'
import storage from '@/utils/storage'
// import bus from '@/utils/bus'

export default {
  components: { WorkPlan, Personnel, UploadImg, UploadVideo },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      titleQd: '签到图片',
      titleJx: '轿厢图片',
      titleJf: '机房图片',
      titleJd: '轿顶图片',
      titleDk: '地坑图片',
      titleQt: '其他图片',
      titleVd: '现场视频',
      inFile: '',
      roomFile: '',
      topFile: '',
      downFile: '',
      signFile: '',
      otherFile: '',
      videoUrl: '/video/test_mv01.mp4',
      type: 1,
      visible: false,
      conVisible: false,
      perVisible: false,
      creValue: '',
      lasValue: '',
      maValue: '',
      dataList: [],
      originList: [],
      // typeOptions: [
      //   {
      //     value: '1',
      //     label: '维保工单'
      //   },
      //   {
      //     value: '2',
      //     label: '救援工单'
      //   }
      // ],
      typeOptions: [
        {
          value: '1',
          label: '维保工单'
        }
      ],
      catValue: '',
      tablehead: [
        {
          index: 0,
          prop: 'registerCode',
          label: '电梯注册代码',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 1,
          prop: 'rescueCode',
          label: '位置码',
          width: '100',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 2,
          prop: 'usePlaceName',
          label: '使用场所',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 3,
          prop: 'maintenanceUnitName',
          label: '维保单位',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 4,
          prop: 'useUnitName',
          label: '使用单位',
          sortable: false,
          fixed: true,
          isShow: true
        }
      ],
      form: { ...this.data },
      formOrigin: {
        acceptTime: '',
        arriveTime: '',
        assignTime: '',
        crtDate: '',
        crtOpr: '',
        deviceId: '',
        dispatcherId: '',
        downImage: '',
        elevatorId: '',
        elevatorList: [],
        finishTime: '',
        id: 0,
        inImage: '',
        lstEdtDate: '',
        lstEdtOpr: '',
        maUnitName: '',
        maUnitid: '',
        orderNumber: '',
        orgId: '',
        otherImage: '',
        placeId: '',
        planId: '',
        registerCode: '',
        remark: '',
        rescueCode: '',
        roomImage: '',
        signImage: '',
        state: '',
        topImage: '',
        type: '维保工单',
        userUnitId: '',
        userUnitName: '',
        version: '',
        videoPath: '',
        workUserName: '',
        workmanId: '',
        planName: ''
      },
      paging: {
        currentPage: 1,
        pageSize: 4,
        pageSizeArr: [4, 8, 10, 14],
        total: 0
      },
      parma: {
        bindState: '',
        id: '',
        registerCode: '',
        registerUnit: '',
        rescueCode: '',
        maintenanceUnitName: '',
        maintenanceUnitId: '',
        useUnitName: '',
        useUnitId: ''
      }
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.visible = v
    },
    data(v) {
      // console.log(v)
      if (v.id === 0) {
        this.form = { ...this.formOrigin }
      } else {
        this.form = { ...this.formOrigin }
        this.form = { ...v }
        this.dataList = [...v.elevatorList]
        this.$nextTick(res => {
          this.dataList.map(item => {
            this.$refs.multipleTable.toggleRowSelection(item, true)
          })
        })
      }
    }
  },
  created() {
    this.userInfo = JSON.parse(storage.get('userInfo'))
  },
  mounted() {
    // this.getElevatorList()
  },
  methods: {
    handleSave(types) {
      if (!(/^\S+$/.test(this.form.planName))) {
        showNotice('error', '提示', '请选择计划')
        return
      }
      if (!(/^\S+$/.test(this.form.workUserName))) {
        showNotice('error', '提示', '请选择维保人员')
        return
      }
      if (this.selectioned === undefined) {
        showNotice('error', '提示', '请选择电梯')
        return
      }
      const states =
        this.form.state === '发起' ? 1
          : this.form.state === '受理' ? 2
            : this.form.state === '指派' ? 3
              : this.form.state === '接单' ? 4
                : this.form.state === '处理' ? 5 : 6
      const params = {
        acceptTime: this.form.acceptTime === '' ? '' : this.$moment(this.form.acceptTime).format('YYYY-MM-DD h:mm:ss'), // 接单时间
        arriveTime: this.form.arriveTime === '' ? '' : this.$moment(this.form.arriveTime).format('YYYY-MM-DD h:mm:ss'), // 达到时间
        assignTime: this.form.assignTime === '' ? '' : this.$moment(this.form.assignTime).format('YYYY-MM-DD h:mm:ss'), // 派单时间
        crtDate: this.form.crtDate === '' ? '' : this.$moment(this.form.crtDate).format('YYYY-MM-DD h:mm:ss'), // 创建时间
        crtOpr: this.form.crtOpr, // 创建人
        deviceId: this.form.deviceId, // 救援设备ID
        dispatcherId: this.form.dispatcherId, // 派单员ID
        downImage: this.form.downImage, // 地坑图片路径
        elevatorId: this.form.elevatorId, // 电梯ID --
        finishTime: this.form.finishTime === '' ? '' : this.$moment(this.form.finishTime).format('YYYY-MM-DD h:mm:ss'), // 完成时间
        id: this.form.id, // id
        inImage: this.form.inImage, // 轿厢图片路径
        lstEdtDate: this.form.lstEdtDate === '' ? '' : this.$moment(this.form.lstEdtDate).format('YYYY-MM-DD h:mm:ss'), // 最后修改时间
        lstEdtOpr: this.form.lstEdtOpr, // 最后修改人ID
        maUnitName: this.form.maUnitName, // 维保单位
        maUnitid: this.form.maUnitid, // 维保单位ID --
        orderNumber: this.form.orderNumber, // 工单编号
        orgId: this.form.orgId === '' ? this.userInfo.orgList[0].id : this.form.orgId, // 机构id
        otherImage: this.form.otherImage, // 其他图片路径
        placeId: this.form.placeId, // 使用场合ID
        planId: this.form.planId, // 计划ID --
        registerCode: this.form.registerCode, // 电梯注册
        remark: this.form.remark, // 备注
        rescueCode: this.form.rescueCode, // 电梯求援代码
        roomImage: this.form.roomImage, // 机房图片路径
        signImage: this.form.signImage, // 签到图片路径
        state: states, // 1：发起，2：受理：3：指派：4：接单，5：处理，6：完成
        topImage: this.form.topImage, // 轿顶图片路径
        type: 1, // 1：维保工单，2：救援工单(暂时写死为1) --
        // type: this.form.type === '维保工单' ? 1 : 2, // 1：维保工单，2：救援工单 --
        userUnitId: this.form.userUnitId, // 使用单位ID --
        userUnitName: this.form.userUnitName, // 使用单位名称
        version: this.form.version, // 版本号
        videoPath: this.form.videoPath, // 现场视频路径
        workUserName: this.form.workUserName, // 维保工人名称
        workmanId: this.form.workmanId // 维保工人ID --
      }
      const form1 = new FormData()
      form1.append('acceptTime', this.form.acceptTime === '' ? '' : this.$moment(this.form.acceptTime).format('YYYY-MM-DD h:mm:ss'))
      form1.append('arriveTime', this.form.arriveTime === '' ? '' : this.$moment(this.form.arriveTime).format('YYYY-MM-DD h:mm:ss'))
      form1.append('assignTime', this.form.assignTime === '' ? '' : this.$moment(this.form.assignTime).format('YYYY-MM-DD h:mm:ss'))
      form1.append('crtDate', this.form.crtDate === '' ? '' : this.$moment(this.form.crtDate).format('YYYY-MM-DD h:mm:ss'))
      form1.append('lstEdtDate', this.form.lstEdtDate === '' ? '' : this.$moment(this.form.lstEdtDate).format('YYYY-MM-DD h:mm:ss'))
      form1.append('finishTime', this.form.finishTime === '' ? '' : this.$moment(this.form.finishTime).format('YYYY-MM-DD h:mm:ss'))
      form1.append('crtOpr', this.form.crtOpr)
      form1.append('deviceId', this.form.deviceId === null ? '' : this.form.deviceId)
      form1.append('dispatcherId', this.form.dispatcherId === null ? '' : this.form.dispatcherId)
      form1.append('downFile', this.downFile) // 地坑图片路径
      form1.append('downImage', this.form.dImage === null ? '' : this.form.dImage) // 地坑图片路径
      form1.append('elevatorId', this.form.elevatorId)
      form1.append('id', this.form.id)
      form1.append('inFile', this.inFile) // 轿厢图片路径
      form1.append('inImage', this.form.iImage === null ? '' : this.form.iImage) // 轿厢图片路径
      form1.append('lstEdtOpr', this.form.lstEdtOpr)
      form1.append('maUnitName', this.form.maUnitName)
      form1.append('maUnitid', this.form.maUnitid)
      form1.append('orderNumber', this.form.orderNumber)
      form1.append('orgId', this.form.orgId)
      form1.append('otherFile', this.otherFile) // 其他图片路径
      form1.append('otherImage', this.form.oImage === null ? '' : this.form.oImage) // 其他图片路径
      form1.append('placeId', this.form.placeId === null ? '' : this.form.placeId)
      form1.append('planId', this.form.planId)
      form1.append('registerCode', this.form.registerCode)
      form1.append('remark', this.form.remark)
      form1.append('rescueCode', this.form.rescueCode)
      form1.append('roomFile', this.roomFile) // 机房图片路径
      form1.append('roomImage', this.form.rImage === null ? '' : this.form.rImage) // 机房图片路径
      form1.append('signFile', this.signFile) // 签到图片路径
      form1.append('signImage', this.form.sImage === null ? '' : this.form.sImage) // 签到图片路径
      form1.append('state', 2)
      form1.append('topFile', this.topFile) // 轿顶图片路径
      form1.append('topImage', this.form.tImage === null ? '' : this.form.tImage) // 轿顶图片路径
      form1.append('type', 1)
      form1.append('userUnitId', this.form.userUnitId === null ? '' : this.form.userUnitId)
      form1.append('userUnitName', this.form.userUnitName)
      form1.append('version', this.form.version)
      form1.append('videoFile', this.form.videoFile) // 现场视频路径 this.videoUrl
      form1.append('videoPath', this.form.vPath === null ? '' : this.form.vPath) // 现场视频路径
      form1.append('workUserName', this.form.workUserName)
      form1.append('workmanId', this.form.workmanId)
      // console.log(params)
      if (types === 0) {
        this.handleCreate(params)
      } else {
        this.handleUpdate(form1)
      }
    },
    handleCreate(data) {
      miOrderAdd(data).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '添加成功')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.code === '失败') {
            showNotice('error', '提示', '添加失败')
          } else {
            // showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    // 视频
    handleVideo(video) {
      // console.log(video)
      this.form.videoFile = video.videofile
      this.form.videoPath = video.base64Val
    },
    // 轿厢
    handleImg1(img) {
      console.log(img)
      this.inFile = img.imgfile
      this.form.inImage = img.base64Val
    },
    // 机房
    handleImg2(img) {
      // console.log(img)
      this.roomFile = img.imgfile
      this.form.roomImage = img.base64Val
    },
    // 轿顶
    handleImg3(img) {
      // console.log(img)
      this.topFile = img.imgfile
      this.form.topImage = img.base64Val
    },
    // 地坑
    handleImg4(img) {
      // console.log(img)
      this.downFile = img.imgfile
      this.form.downImage = img.base64Val
    },
    // 签到
    handleImg5(img) {
      // console.log(img)
      this.signFile = img.imgfile
      this.form.signImage = img.base64Val
    },
    // 其他
    handleImg6(img) {
      // console.log(img)
      this.otherFile = img.imgfile
      this.form.otherImage = img.base64Val
    },

    handlePerSon() {
      this.perVisible = true
    },
    // 人员回调更新
    handlePerUpdate(row) {
      this.form.workUserName = row.name
      this.form.workmanId = row.id
      // console.log(row)
    },
    // 计划回调更新
    handleUpdate(data) {
      miOrderUpdate(data).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '更新成功')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.code === '失败') {
            showNotice('error', '提示', '更新失败')
          } else {
            // showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    // 合同回调更新
    handleWorkUpdate(row) {
      // console.log(row)
      this.form.planName = row.name
      this.form.planId = row.id
      this.form.maUnitName = row.maUnitName
      this.form.maUnitid = row.maUnitId
      // console.log(row)
    },
    // 电梯信息回调更新
    handleWorkUpdates(rows) {
      this.originList = rows
      this.dataList = rows
      this.paging.total = rows.length
      // console.log(rows)
    },
    handleContrat() {
      this.conVisible = true
    },
    handleCloseDialog() {
      this.visible = !this.visible
    },
    getEleList(params) {
      this.dataList = this.dataList.filter(item => {
        // console.log(item)
        if (
          item.rescueCode === params.rescueCode ||
          item.registerCode === params.registerCode ||
          item.maintenanceUnitName === params.maintenanceUnitName ||
          item.useUnitName === params.useUnitName
        ) {
          return item
        }
      })
    },
    // getElevatorList() {
    //   elevatorQueryList(this.parma.bindState, this.parma.id, this.parma.maintenanceUnitId, this.paging.currentPage, this.paging.pageSize, this.parma.registerCode, this.parma.registerUnit, this.parma.rescueCode, this.parma.useUnitId).then(res => {
    //     if (res.code === '000000') {
    //       this.dataList = res.data ? res.data : []
    //       const i = this.dataList.map(item => item)
    //       this.paging.total = i.length
    //     } else {
    //       // showNotice('error', '提示', res.msg)
    //     }
    //     // console.log(res)
    //   })
    // },
    // 单选操作，全选按钮失效操作
    handleCheck(selection, row) {
      this.$refs.multipleTable.clearSelection()
      if (selection.length === 0) {
        // 判断selection是否有值存在
        return
      }
      if (row) {
        this.selectioned = row
        this.form.elevatorId = row.id
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
    },

    // 取消单选的checkbox
    handleCheckChange(row) {
      // console.log(row)
      if (row.length === 0) {
        this.selectioned = null
      }
    },
    handleEmptySearch() {
      this.parma.registerCode = ''
      this.parma.rescueCode = ''
      this.parma.maintenanceUnitId = ''
      this.parma.maintenanceUnitName = ''
      this.parma.useUnitId = ''
      this.parma.useUnitName = ''
      this.dataList = [...this.originList]
    },
    handleClosePCDialog() {
      this.conVisible = !this.conVisible
    },
    handleClosePerDialog() {
      this.perVisible = !this.perVisible
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
@import "@/styles/public.scss";
.work-con {
  background: #ffffff;
  margin-left: -200px;
  .workbox {
    width: 998px;
  }
  .divider {
    width: 100%;
  }
  .statuso {
    font-size: 16px;
    font-weight: 700;
  }
  .status-0 {
    color: red;
  }
  .status-1 {
    color: darkgoldenrod;
  }
  .status-2 {
    color: blue;
  }
  .status-3 {
  }
  .status-4 {
  }
  .status-5 {
  }
}
.work-conta {
  width: 1000px;
  .con-table {
    margin-top: 60px;
  }
  .work-content {
    height: 600px;
    .main-cont {
      display: flex;
      justify-content: center;
      height: 140px;
      .cont-lef {
        margin-right: 40px;
      }
    }
  }
  .wfooters {
    margin-top: 70px;
    .btn {
      height: 40px;
    }
  }
}
.work-container {
  width: 1000px;
  margin-top: -130px;
  .wfooter {
    margin-bottom: 30px;
    .btn {
      height: 40px;
    }
  }
  .uploadVideo {
    margin-top: 30px;
  }
  .work-content {
    min-height: 560px;
    .work-main {
      .wo-imageBox {
        // width: 100%;
        justify-content: space-around;
        height: 100%;
        .videobox {
          margin-top: -200px;
          .video_cage {
            width: 200px;
            height: 140px;
            // border: 1px solid #eeeeee;
            border-radius: 5px;
            object-fit: fill;
          }
        }
        .loadImg {
          margin-left: 150px;
        }
        .uploadImg {
          width: 160px !important;
        }
        .previewImg {
          width: 160px !important;
          .img {
            width: 160px;
            height: 130px;
          }
        }
        .avatarIcon,
        .avatar {
          width: 160px;
          height: 130px;
          border-radius: 10px;
        }
        .jx {
          margin-left: 96px;
        }
        .el-box {
          width: 360px;
          align-items: center;
          justify-content: center;
          // margin-left: -8px;
          .image1 {
            .name {
              width: 160px;
              // margin-right: 4px;
            }
          }
        }
        .el-box1 {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          // width: 560px;
          // margin-left: 8px;
          .image1 {
            .name {
            }
            .avatarIcon,
            .avatar {
              // width: ;
            }
          }
        }

        .bcakbox {
          // width: 260px;
          .bcakImage {
            width: 300px;
            height: 300px;
            margin-left: -40px;
            // margin-top: -160px;
            background: url("~@/assets/maintenance/dt.png") no-repeat;
            background-size: 100% 100%;
          }
        }
        .box1-imgbox {
          flex: 1;
        }
        .image1 {
          display: flex;
          .name {
            text-align: right;
          }
        }
      }
      .code-name {
        margin-left: 40px;
      }
      .co-date {
        margin-left: 28px;
      }
      .creDate {
        margin-left: 31px;
      }
      .main-cont {
        justify-content: center;
        height: 160px;
        .cont-right {
          width: 360px;
        }
        .cont-left {
          margin-right: 50px;
        }
      }
    }
  }
}
</style>
